<template>
	<view class="wrap">
		<swiper class="swiper" :indicator-dots="false" circular interval=2000>
			<swiper-item class="swiper-box" v-for="(item, index) in info" :key="index">
				<view style="padding: 10px;background-color: blue;color: #fff;">DSP区域，DSP-3层，第{{index + 1}}层</view>
				<view>
					<u-table>
						<u-tr>
							<u-th></u-th>
							<u-th>A</u-th>
							<u-th>B</u-th>
							<u-th>C</u-th>
							<u-th>D</u-th>
						</u-tr>
						<u-tr v-for="(item1, index1) in list" :key="index1">
							<u-td class="u-td">{{index1+1}}</u-td>
							<u-td class="u-td"
								:style="{backgroundColor:item1.name?'#3094ff':(!item1.name && item1.flag==1)?'red' :''}">
								<view
									style="width: 100%;height: 100%;display: flex;justify-content: center;align-items:center;"
									@click="select(item1,index1,1)">{{item1.name}}</view>
							</u-td>
							<u-td class="u-td"
								:style="{backgroundColor:item1.bbb?'#3094ff':(!item1.bbb && item1.flag==2)?'red' :''}">
								<view
									style="width: 100%;height: 100%;display: flex;justify-content: center;align-items:center;"
									@click="select(item1,index1,2)">{{item1.bbb}}</view>
							</u-td>
							<u-td class="u-td"
								:style="{backgroundColor:item1.ccc?'#3094ff':(!item1.ccc && item1.flag==3)?'red' :''}">
								<view
									style="width: 100%;height: 100%;display: flex;justify-content: center;align-items:center;"
									@click="select(item1,index1,3)">{{item1.ccc}}</view>
							</u-td>
							<u-td class="u-td"
								:style="{backgroundColor:item1.ddd?'#3094ff':(!item1.ddd && item1.flag==4)?'red' :''}">
								<view
									style="width: 100%;height: 100%;display: flex;justify-content: center;align-items:center;"
									@click="select(item1,index1,4)">{{item1.ddd}}</view>
							</u-td>
						</u-tr>

					</u-table>
				</view>
			</swiper-item>
		</swiper>


		<view class="footer">
			<view class="confrim-btn padding padding-bottom-sm flex bg-white">
				<u-button type="primary" class="btn" style="width: 100%;" @click="submit">确定</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [{}, {}],
				list: [{
					name: '11111',
					bbb: '22222',
					ccc: '333333',
					ddd: '444444'
				}, {
					name: '',
					// flag: 1
				}, {
					name: '3333',
					ddd: '444444'
				}, {
					name: '',
					ccc: '444444'
				}, ],
				cposcode :'',
				parentCode:'',
			}
		},
		onLoad(params) {
			this.parentCode = params.cposcode
			this.loadList();
		},
		watch: {

		},
		onShow() {},
		onReady() {},
		methods: {
			select(item1, index1, flag) {
				console.log(item1);
				console.log(index1);
				// this.list[index1].flag = 1
				let arr = this.list.map((item, index) => {
					if (index1 == index) {
						item.flag = flag
					} else {
						item.flag = ''
					}
					return item
				})
				this.list = arr
			},

			cancel() {
				uni.$emit('refreshData');
				uni.navigateBack({
					delta: 2,
				})
			},

			loadList() {
				this.$u.api.basApi.findPosEndByOne({"parent.cposcode":this.parentCode}).then(res => {
					console.log(res.data);
				})
			},
			submit() {
				console.log(this.model);
				
			},
		}
	}
</script>
<style>
	.footer {
		position: fixed;
		bottom: 0;
		right: 0;
		width: 100%;
		line-height: var(--footer-height);
		background: #ffffff;
		color: #ffffff;
	}

	.btn-plus {
		position: fixed;
		bottom: 350rpx;
		right: 50rpx;
		z-index: 2;
		opacity: 0.6;
	}

	.btn-plus:hover {
		opacity: 1;
	}

	.wrap {
		width: 100%;
		height: 100vh;
	}

	.swiper {
		width: 100%;
		height: 100%;
	}

	.swiper-box {
		width: 100%;
		height: 100%;
	}

	.add {
		position: absolute;
		right: 130rpx;
		top: 0;
		margin-right: 0;
	}

	.upload {
		position: absolute;
		right: 65rpx;
		top: 0;
		margin-right: 0;
	}

	.rights {
		position: absolute;
		/* display: inline-block; */
		right: 0;
		top: 0;
		margin-right: 0;
		/* width: 100%; */

	}
</style>